﻿@{
    ViewBag.Title = "Index";
}

 
<link href="@Url.Content("~/Content/Menu.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {

        $(".navigationContent li").each(function () { $(this).addClass("accent-bg"); });
    });
</script>
<div class='metro-pivot'> 

    @foreach (var menugroup in ViewBag.MenuGroups)
    {
        <div class='pivot-item'>
            <h3>
                @menugroup.Group<name></h3>
            <ul id="@menugroup" class="navigationContent accent-bg">
                @foreach (var Menu in menugroup.Menus)
                {
                    <li><a href=@Menu.Link>
                        <h5>
                            @Menu.Title</h5>
                    </a></li>
                }
            </ul>
        </div>     

    }
</div>
<script type="text/javascript">
    $(function () {
        $("div.metro-pivot").metroPivot();
        ApplyAnimation();
    });

    function ApplyAnimation() {

        $('.navigationContent li').each(function (index) {
            var item = $(this);

            item.fadeIn(300 * (index + 1));

        });

    }

    function callback1() { }
</script>
